<template>
  <div class="coupon-wrap">
    <share-shade ref="shareShades"></share-shade>
    <ul class="coupon-list" v-show="couponList.length">
      <van-list
          v-model="loading"
          :finished="finished"
          :error.sync="error"
          :immediate-check="immediateCheck"
          error-text="请求失败，点击重新加载"
          finished-text=""
          @load="onLoad"
      >
        <li class="coupon-list-item" v-for="(couponData, index) in couponList" :key="index">
          <img class="goods-img" :src="couponData.item.img || defaultImg"/>
          <div class="coupon-goods-info">
            <div class="coupon-btn-wrap">
              <div class="coupon-price-wrap">
                <div class="goods-title">
                  <div class="tit">{{ couponData.item.title }}</div>
                </div>
                <p class="sale-price active-price">购买价：<span>￥{{ couponData.item.price }}</span></p>
                <p class="sale-price">券后价：<span>￥{{ couponData.item.after_price }}</span></p>
                <p class="sale-price">券后佣金：<span class="sale-price-color">￥{{ couponData.item.commission }}</span></p>
              </div>
              <div>
                <div class="coupon-name">优惠券</div>
                <p v-if="couponData.promotion_type == 0" class="coupon-btn-price">￥<span>{{ couponData.value }}</span>
                </p>
                <p v-else class="coupon-btn-price"><span>{{ couponData.value }}折</span></p>
                <div class="coupon-btn-box">
                  <div class="coupon-btn" @click="clickBtn(couponData)">
                    <span>我要分享</span>
                  </div>
                </div>
                <p class="surplus-share">剩余领取数量：<span>{{ couponData.share_count }}</span></p>
              </div>
            </div>
          </div>
        </li>
      </van-list>
    </ul>
    <div class="no-data" v-show="!couponList.length">
      <no-data :noData="noData"></no-data>
    </div>
    <!-- 分享链接弹框 -->
    <van-dialog
        v-model="isShowdeposit"
        title="分享优惠券"
        close-on-click-overlay
        :show-confirm-button="false"
        class="common-confirm"
        @close="clickClose"
    >
      <div class="deposit-box">
        <div class="close" @click="clickClose">
          <img src="https://img.wifenxiao.com/h5-wfx/images/DZ/coupon/close_btn.png" alt="">
        </div>
        <div class="input-box">
          <input v-model="number" type="number" placeholder="输入分享优惠券的数量">
        </div>
        <div class="share-link" @click="clickShare">
          <span>生成分享链接</span>
        </div>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import Vue from 'vue'
import {List} from 'vant'

Vue.use(List)
const noDataImg = 'https://img.wifenxiao.com/h5-wfx/images/user/no_distributor.png'
const defaultImg = 'https://img.wifenxiao.com/h5-wfx/images/default_goods_img.jpg'
import noData from '@/components/noData/index'
import wxShare from '@/components/wxShare'
import shareShade from '@/components/wxShare/shareShade'
import {getCouponList, getShareCoupon} from '@/api/dz/dzApi.js'

export default Vue.extend({

  data() {
    return {
      p: 2,
      page: 10,
      couponList: [],
      defaultImg: defaultImg,
      noData: {
        text: '暂无优惠券',
        img: noDataImg,
        marginTop: '10em'
      },
      loading: false,
      finished: false,
      error: false,
      immediateCheck: false,
      isShowdeposit: false,
      number: null,
      shareInfo: {
        img: '',
        title: '',
        detailId: ''
      },
      coupon_id: ''
    }
  },

  methods: {
    init() {
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 50000)
      const data = {
        page: this.page
      }
      getCouponList(data).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          this.couponList = res.data
        } else {
          this.$Error(res.msg)
        }
      })
    },
    Jump(url, data) {
      this.$JumpPath(this, url, data)
    },
    // 加载更多
    onLoad() {
      const data = {
        p: this.p,
        page: this.page
      }
      getCouponList(data).then(res => {
        this.loading = false
        if (res.data.length) {
          this.couponList.push(...res.data)
          this.p++
        } else {
          this.finished = true
        }
      }).catch(() => {
        this.error = true
      })
    },
    clickBtn(data) {
      this.shareInfo.img = data.item.img
      this.shareInfo.title = data.item.title
      this.coupon_id = data.coupon_id
      this.isShowdeposit = true
    },
    clickClose() {
      this.isShowdeposit = false
      this.number = null
    },
    // 点击立即分享
    clickShare() {
      if (this.number <= 0) {
        this.$Error('请输入要分享的优惠券数量')
        return
      }
      const data = {
        coupon_id: this.coupon_id,
        number: this.number
      }
      getShareCoupon(data).then(res => {
        if (res.status == 1) {
          const query = this.$route.query
          const detailId = res.data.id
          this.Jump('receiveShareCoupon', {
            detailId: detailId,
            sid: query.sid,
            pid: query.pid
          })
        } else {
          this.$Error(res.msg)
        }
      })
    }
  },

  created() {
    this.init()
  },
  components: {
    noData,
    wxShare,
    shareShade
  }
})
</script>

<style lang='scss'>
@import "../../../../styles/mixin";

.coupon-wrap {
  width: 100%;
  height: 100%;
  padding: 19px 25px 0 25px;

  .coupon-list {
    li {
      width: 700px;
      height: 223px;
      display: flex;
      align-items: center;
      padding: 25px;
      margin-bottom: 20px;
      background: #fff;
      border-radius: 20px;

      .goods-img {
        width: 172px;
        height: 172px;
        border-radius: 10px;
        margin-right: 20px;
      }

      .coupon-goods-info {
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;

        .goods-title {
          .tit {
            color: #333333;
            @include lineClamp(24px, 1.2, 2);
            font-weight: bold;
            width: 280px;
          }
        }

        .coupon-btn-wrap {
          display: flex;
          justify-content: space-between;
          // align-items: center;
          height: 100%;

          .coupon-price-wrap {
            /*margin-top: 40px;*/
            .sale-price {
              font-weight: 500;
              color: rgba(51, 51, 51, 1);
              font-size: 24px;
              line-height: 35px;

              .sale-price-color {
                color: #FF8C01;
              }
            }

            .active-price {
              color: rgba(153, 153, 153, 1);
            }
          }

          .coupon-name {
            font-size: 28px;
            text-align: center;
            color: #f20c23;
          }

          .coupon-btn-box {
            justify-content: flex-end;
            display: flex;
          }

          .coupon-btn-price {
            font-weight: bold;
            color: rgba(242, 12, 35, 1);
            font-size: 26px;
            margin-bottom: 5px;
            text-align: center;

            span {
              font-size: 40px;
            }
          }

          .coupon-btn {
            /*float: right;*/
            overflow: hidden;
            width: 142px;
            height: 52px;
            text-align: center;
            background: linear-gradient(-90deg, rgba(233, 1, 4, 1), rgba(254, 27, 73, 1));
            border-radius: 26px;
            line-height: 52px;
            margin: 0 auto;

            span {
              color: rgba(255, 255, 255, 1);
              font-size: 24px;
            }
          }

          .surplus-share {
            font-weight: 500;
            color: rgba(153, 153, 153, 1);
            font-size: 24px;
            line-height: 32px;
            margin-top: 5px;
            text-align: right;
            white-space: nowrap;
          }
        }
      }
    }
  }

  .deposit-box {
    padding: 50px 70px 60px 70px;

    .input-box {
      width: 460px;
      height: 86px;
      background: rgba(247, 247, 247, 1);
      border-radius: 43px;

      input {
        display: inline-block;
        width: 100%;
        height: 100%;
        font-size: 24px;
        padding: 15px 70px;
        border: 0;
        background: transparent;
      }
    }

    .share-link {
      margin-top: 40px;
      width: 460px;
      height: 86px;
      background: linear-gradient(-90deg, rgba(233, 1, 4, 1), rgba(254, 27, 73, 1));
      border-radius: 43px;
      color: rgba(255, 255, 255, 1);
      font-size: 28px;
      text-align: center;
      line-height: 86px;

      .share-wrap {
        display: inline-block;
      }
    }

    .close {
      position: absolute;
      top: 20px;
      right: 20px;
      width: 28px;
      height: 28px;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .van-dialog__header {
    position: relative;
  }
}
</style>
